<template>
	<div class="test-permission-wrapper">
		<a-card title="仪表盘权限包装组件测试">
			<dashboard-permission-wrapper ref="permissionWrapperRef" />

			<div class="test-actions" style="margin-top: 16px">
				<a-button type="primary" @click="refreshWrapper">刷新权限包装组件</a-button>
				<a-button style="margin-left: 8px" @click="testApi">测试API接口</a-button>
			</div>
		</a-card>
	</div>
</template>

<script name="testPermissionWrapper" setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'
	import DashboardPermissionWrapper from './component/DashboardPermissionWrapper.vue'
	import { getUserAccessibleDashboards } from '@/views/plugin/dashboard/api/dashboardApi'

	const permissionWrapperRef = ref(null)

	// 刷新权限包装组件
	const refreshWrapper = () => {
		if (permissionWrapperRef.value) {
			permissionWrapperRef.value.refresh()
			message.success('权限包装组件已刷新')
		}
	}

	// 测试API接口
	const testApi = async () => {
		try {
			const result = await getUserAccessibleDashboards()
			console.log('API测试结果:', result)
			message.success(`API调用成功，返回${result?.length || 0}个仪表盘`)
		} catch (error) {
			console.error('API测试失败:', error)
			message.error('API调用失败: ' + error.message)
		}
	}
</script>

<style lang="less" scoped>
	.test-permission-wrapper {
		padding: 16px;

		.test-actions {
			border-top: 1px solid #f0f0f0;
			padding-top: 16px;
		}
	}
</style>
